<style lang="scss">
.ivu-modal-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  .ivu-modal{
    top: 0;
  }
}
</style>
<template>
  <div class="content">
    <Breadcrumb>
      <BreadcrumbItem to="/index">首页</BreadcrumbItem>
      <BreadcrumbItem>歌曲管理</BreadcrumbItem>
    </Breadcrumb>
    <Form inline :label-width="70" label-position="left" :model="search">
      <Button type="success" style="margin-right: 30px" @click="addModal = true">添加</Button>
      <FormItem label="歌曲名">
        <Input type="text" v-model="search.name" placeholder="请输入歌曲名检索"/>
      </FormItem>
      <FormItem label="歌手">
        <Input type="text" v-model="search.singer" placeholder="请输入歌手检索"/>
      </FormItem>
      <FormItem label="歌手性别">
        <Select v-model="search.singerSex" clearable filterable placeholder="请选择歌手性别检索">
          <Option value="1">男</Option>
          <Option value="2">女</Option>
        </Select>
      </FormItem>
      <Button type="primary" style="margin-left: 30px" @click="searchClick">搜索</Button>
    </Form>
    <Table stripe row-key="id" :columns="columns" :data="data"></Table>
    <Page :current="current" :total="total" :page-size="pageSize" show-total show-sizer show-elevator :styles="{marginTop: '20px'}" @on-change="pageChange" @on-page-size-change="pageSizeChange" />
    <Modal
      v-model="modalShow"
      :title="addModal ? '添加歌曲' : editModal ? '修改歌曲' : '' + '灵异歌曲'"
      cancel-text="取消"
      class-name="center-modal"
      @on-visible-change="modalChange">
      <Form :model="form" :label-width="80" ref="modalForm" :rules="rules">
        <FormItem label="歌名" prop="name">
          <Input v-model="form.name" placeholder="请输入歌曲名"/>
        </FormItem>
        <FormItem label="歌手" prop="singer">
          <Input v-model="form.singer" placeholder="请输入歌手名"/>
        </FormItem>
        <FormItem label="歌手性别" prop="singerSex">
          <RadioGroup v-model="form.singerSex">
            <Radio :label="1">男</Radio>
            <Radio :label="2">女</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label=" 歌手头像" prop="picture">
          <Input v-model="form.picture" style="display: none"/>
          <img v-show="!pictureShow" :src="form.picture" width="100%" alt="">
          <Button v-show="!pictureShow" type="info" size="large" @click="rePictureImage(form.picture)">重选选择</Button>
          <Upload
            v-show="pictureShow"
            ref="picture"
            type="drag"
            :format="['jpg','jpeg','png', 'gif']"
            :max-size="500 * 1024"
            :headers="{ 'Authentication-Token': this.getToken }"
            action="http://39.102.62.234:8088/music/imageUpload"
            :on-success="pictureSuccess"
            :on-error="uploadError">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>单击或拖动文件上传</p>
            </div>
          </Upload>
        </FormItem>
        <FormItem label="上传封面" prop="cover">
          <Input v-model="form.cover" style="display: none"/>
          <img v-show="!coverShow" :src="form.cover" width="100%" alt="" style="background-position: center; max-height: 200px;">
          <Button v-show="!coverShow" type="info" size="large" @click="reCoverImage(form.cover)">重选选择</Button>
          <Upload
            v-show="coverShow"
            ref="cover"
            type="drag"
            :format="['jpg','jpeg','png', 'gif']"
            :max-size="500 * 1024"
            :headers="{ 'Authentication-Token': this.getToken }"
            action="http://39.102.62.234:8088/music/imageUpload"
            :on-success="coverSuccess"
            :on-error="uploadError">
            <div style="padding: 20px 0">
              <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
              <p>单击或拖动文件上传</p>
            </div>
          </Upload>
        </FormItem>
        <FormItem label="上传歌曲" prop="url">
          <Input v-model="form.url" style="display: none"/>
          <Input v-show="form.url != null && form.url !== ''" :value="form.name" icon="ios-close-circle-outline" :readonly="true" @on-click="reUrl(form.url, 'url')" />
          <Upload
            v-show="form.url == null || form.url === ''"
            ref="upload"
            :format="['wav','mp3', 'wma', 'mpeg', 'acc', 'flac', 'ogg']"
            :max-size="500 * 1024"
            :headers="{ 'Authentication-Token': this.getToken }"
            action="http://39.102.62.234:8088/music/musicUpload"
            :on-success="uploadSuccess"
            :on-error="uploadError">
            <Button icon="ios-cloud-upload-outline">上传歌曲</Button>
          </Upload>
        </FormItem>
        <FormItem label="上传歌词" prop="lyricUrl">
          <Input v-model="form.lyricUrl" style="display: none"/>
          <Input v-show="form.lyricUrl != null && form.lyricUrl !== ''" :value="form.name" icon="ios-close-circle-outline" :readonly="true" @on-click="reUrl(form.lyricUrl, 'lyricUrl')" />
          <Upload
            v-show="form.lyricUrl == null || form.lyricUrl === ''"
            ref="lyricUrl"
            :format="['LRC','ID3', 'TXT', 'TAG', 'SRT', 'UTF', 'SMI']"
            :max-size="500 * 1024"
            :headers="{ 'Authentication-Token': this.getToken }"
            action="http://39.102.62.234:8088/music/lyricUpload"
            :on-success="lyricSuccess"
            :on-error="uploadError">
            <Button icon="ios-cloud-upload-outline">上传歌词</Button>
          </Upload>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" size="large" @click="modalShow = false">取消</Button>
        <Button type="primary" size="large" @click="submit">{{ addModal ? '添加' : editModal ? '修改' : '' + '灵异' }}</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import Vue from 'vue'
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.min.css'
import { addMusic, delMusic, delMusicByPath, musicList, updateMusic } from '@/api/music'
Vue.use(Viewer)
export default {
  name: 'Music',
  data: function () {
    return {
      columns: [
        {
          type: 'index'
        },
        {
          title: '歌名',
          key: 'name'
        },
        {
          title: '歌手',
          key: 'singer'
        },
        {
          title: '性别',
          render: (h, params) => {
            return h('span', {}, (params.row.singerSex === 1 ? '男' : '女'))
          }
        },
        {
          title: '创建时间',
          key: 'createTime'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          title: '操作',
          key: 'action',
          width: '260px',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'warning',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.form = { ...params.row }
                    this.editModal = true
                    this.pictureShow = !(this.form.picture != null && this.form.picture !== '')
                    this.coverShow = !(this.form.cover != null && this.form.cover !== '')
                  }
                }
              }, '修改'),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.$Modal.confirm({
                      title: '删除提示',
                      content: '是否确认删除?',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        delMusic(params.row.id).then(res => {
                          if (res.code === 200) {
                            this.getData()
                            this.$Message.success(res.msg)
                          }
                        })
                      }
                    })
                  }
                }
              }, '删除')
            ])
          }
        }
      ],
      data: [],
      addModal: false,
      editModal: false,
      pictureShow: true,
      coverShow: true,
      form: {},
      rules: {
        name: [
          {
            required: true,
            type: 'string',
            message: '歌名不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 100,
            message: '歌名长度在1-200位之间',
            trigger: 'blur'
          }
        ],
        singer: [
          {
            required: true,
            type: 'string',
            message: '歌手不能为空',
            trigger: 'blur'
          },
          {
            min: 1,
            max: 100,
            message: '歌手长度在1-200位之间',
            trigger: 'blur'
          }
        ],
        singerSex: [
          {
            required: true,
            type: 'number',
            message: '歌手性别不能为空',
            trigger: 'blur'
          }
        ],
        url: [
          {
            required: true,
            type: 'string',
            message: '请上传歌曲',
            trigger: 'blur'
          }
        ]
      },
      total: 0,
      current: 1,
      pageSize: 10,
      search: {}
    }
  },
  mounted () {
    this.getData()
  },
  computed: {
    modalShow: {
      get () {
        return this.addModal || this.editModal
      },
      set (val) {
        this.addModal = this.editModal = false
      }
    },
    getToken () {
      return sessionStorage.getItem('token')
    }
  },
  methods: {
    getData () {
      musicList(this.search, this.current, this.pageSize).then(res => {
        this.current = res.data.page.current
        this.total = res.data.page.total
        this.data = res.data.page.records
      })
    },
    modalChange (v) {
      if (!v) {
        this.$refs.modalForm.resetFields()
        this.$refs.upload.clearFiles()
        this.$refs.lyric.clearFiles()
        this.pictureShow = true
        this.coverShow = true
        this.form = {}
      }
    },
    submit () {
      this.$refs.modalForm.validate((v) => {
        if (v) {
          if (this.addModal) {
            addMusic(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.addModal = false
              }
            })
          }
          if (this.editModal) {
            this.form.updateTime = null
            updateMusic(this.form).then(res => {
              if (res.code === 200) {
                this.getData()
                this.$Message.success(res.msg)
                this.editModal = false
              }
            })
          }
        }
      })
    },
    pageChange (index) {
      this.current = index
      this.getData()
    },
    pageSizeChange (size) {
      this.current = 1
      this.pageSize = size
      this.getData()
    },
    searchClick () {
      this.current = 1
      this.getData()
    },
    uploadSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
        this.form.url = res.data.src
      } else {
        this.$Message.error(res.msg)
      }
    },
    pictureSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
        this.form.picture = res.data.src
        this.pictureShow = false
      } else {
        this.$Message.error(res.msg)
      }
      this.$refs.picture.clearFiles()
    },
    coverSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
        this.form.cover = res.data.src
        this.coverShow = false
      } else {
        this.$Message.error(res.msg)
      }
      this.$refs.cover.clearFiles()
    },
    lyricSuccess (res, file, fileList) {
      if (res.code === 200) {
        this.$Message.success(res.msg)
        this.form.lyricUrl = res.data.src
      } else {
        this.$Message.error(res.msg)
      }
    },
    uploadError (error, file, fileList) {
      this.$Message.error(error)
    },
    rePictureImage (link) {
      delMusicByPath(link).then(res => {
        if (res.code === 200) this.$Message.success(res.msg)
      })
      this.pictureShow = true
      this.form.picture = ''
    },
    reCoverImage (link) {
      delMusicByPath(link).then(res => {
        if (res.code === 200) this.$Message.success(res.msg)
      })
      this.coverShow = true
      this.form.cover = ''
    },
    reUrl (link, ref) {
      delMusicByPath(link).then(res => {
        if (res.code === 200) this.$Message.success(res.msg)
      })
      this.form[ref] = ''
      this.$refs[ref].clearFiles()
    },
    editImage (obj) {
      this.form = { ...obj }
      this.uploadShow = false
      this.editModal = true
    }
  }
}
</script>

<style scoped lang="scss">
form {
  margin-top: 20px;
}
</style>
